<template>
    <div class="name-select">
        <Name v-for="name in shownCountryNameList" :class="{ chosen: countryName === name }" :key="name"
            @click="changeName(name)">{{ name }}</Name>
        <Name @click="reset">
            <i class="fa fa-arrows-rotate"></i>
        </Name>
    </div>
</template>

<script lang="ts" setup name="CountryNameControl">
import useCountryName from '@/composables/controls/useCountryName';
import Name from '../game/name.vue';
const emit = defineEmits(['change-name'])
const { countryName, shownCountryNameList, reset, changeName } = useCountryName(emit);
</script>

<style scoped>
.name-select {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 3vw;
}

.name-select>*:not(:last-child):hover,
.name-select>*.chosen {
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px #fff;
}

.name-select>*{
    cursor: pointer;
}
</style>